<template>
  <div>
    <SearchInput />
    <Tabs :tabs="tabs" @tabsItemChange="onTabsParent">
      <block v-if="tabs[0].isActive">
        <view class="first_tab">
          <navigator class="goods_item" v-for="(item,index) in goodsList" :key="index" :url="'/pages/goods_detail/main?goods_id='+item.goods_id" >
            <view class="goods_img">
              <image :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'" mode="widthFix"></image>
            </view>
            <view class="goods_info">
              <view class="goods_name">{{item.goods_name}}</view>
              <view class="goods_price">{{item.goods_price}}</view>
            </view>
          </navigator>
        </view>
      </block>
      <!-- <block v-if="tabs[1].isActive">1</block> -->
      <!-- <block v-if="tabs[2].isActive">2</block> -->
    </Tabs>
  </div>
</template>

<script>
import searchInput from '@/components/searchInput'
import Tabs from '@/components/tabs'
import {request} from '@/utils/tools'
export default {
  components: { searchInput, Tabs },
  data() {
    return {
      tabs: [
        {
          id: 0,
          value: '综合',
          isActive: true
        },
        {
          id: 1,
          value: '销量',
          isActive: false
        },
        {
          id: 2,
          value: '价格',
          isActive: false
        }
      ],
      // 请求数据
      queryInfo: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10
      },
      goodsList: [],
      totalPage: 0
    }
  },
  methods: {
    // tabs组件 拿到的数据 处理
    onTabsParent(index) {
      console.log('父接收的', index)
      this.tabs.forEach((v, i) => {
        i === index ? (v.isActive = true) : (v.isActive = false)
      })
    },
    // 请求数据
    async getGoodsList() {
      console.log('goodslist');
        const {data: res} = await request({
          url: "goods/search",
          data: this.queryInfo
        })
        console.log('goods_list-请求', res)
        // 合并
        this.goodsList=[...this.goodsList, ...res.message.goods],
        this.totalPage= Math.ceil(res.message.total / this.queryInfo.pagesize)
        console.log('页数', this.totalPage)
        console.log('goodsList', this.goodsList)
        wx.stopPullDownRefresh();
      }
  },
  onLoad(options){
    console.log('list-onload');
    // 通过 分类页面 传入的cid 有则用没有就空
    this.queryInfo.cid = options.cid || ""
    this.queryInfo.query = options.query || ""
    this.getGoodsList()
  },
  // 页面触底
  onReachBottom: function () {
    console.log('触底')
    if (this.queryInfo.pagenum >= this.totalPage) {
      wx.showToast({
        title: '没有下一页数据了'
      });
      console.log('%c没数据了', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');
      this.queryInfo.pagenum = this.totalPage
    } else {
      this.queryInfo.pagenum++
      console.log(this.queryInfo.pagenum)
      // 获取数据列表
      this.getGoodsList();
    }
  },
  // 下拉刷新
  onPullDownRefresh: function () {
    console.log('refresh')
    this.goodsList = [],
    this.getGoodsList();
  }
}
</script>

<style lang='less' scope>
.first_tab {
  .goods_item {
    display: flex;
    border-bottom: 5rpx solid #333;

    .goods_img {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      // padding: 5rpx;

      image {
        width: 70%;
        height: 100%;
      }
    }

    .goods_info {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      // 文字
      .goods_name {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .goods_price {
        color: var(--themeColor);
        font-size: 32rpx;
      }
    }
  }
}
</style>